import React, { useState } from "react";
import {
  Steps,
  NavBar,
  List,
  Switch,
  Button,
  Popup,
  Picker,
  Space,
  TextArea
} from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
import Item from "antd-mobile/es/components/dropdown/item";
import dayjs from "dayjs";
import { basicColumns } from "./columns-data";
import { mockRequest } from "./mockRequest";
import { LeftOutline } from "antd-mobile-icons";
import "../style.css";
function Record() {
  const [visible, setVisible] = useState(false);
  const [visible1, setVisible1] = useState(false);
  const [value, setValue] = useState([]);
  const [content, setContent] = useState("提前两小时");
  const [list,setList] = useState([
    {
      id: 1,
      title: "不提醒",
    },
    {
      id: 2,
      title: "提前5分钟",
    },
    {
      id: 5,
      title: "提前30分钟",
    },
    {
      id: 6,
      title: "提前1小时",
    },
    {
      id: 7,
      title: "提前2小时",
    }
  ])
  const location = useLocation();
  const navigate = useNavigate();
  const handleClick = () => {
    setVisible(true);
  };
  const handleTx = () => {
    setVisible1(true);
  };
  const handleTxs = (e) =>{
    setContent(e.title)
    setVisible1(false)
  }
  return (
    <div style={{ backgroundColor: "#F2F2F2", }} >
      <div className="inp">
        <LeftOutline
          onClick={() => {
            navigate("/wxq/ord");
          }}
          className="inp1"
          color="#E3E8EA"
          style={{ fontSize: 25 }}
        />
        <h2>确认预约</h2>
      </div>
      <div className="ordBox">
        <List>
          <List.Item>
            <div className="List_items">
              <div>客户姓名</div>
              <div>{location.state.name}</div>
            </div>
          </List.Item>
          <List.Item>
            <div className="List_items">
              <div>地址</div>
              <div>{location.state.address}</div>
            </div>
          </List.Item>
          <List.Item
            extra={value}
            onClick={() => {
              handleClick();
            }}
          >
            开始日期
          </List.Item>
        </List>
      </div>
      <div className="records">
        <List>
          <List.Item
            extra={content}
            onClick={() => {
              handleTx();
            }}
          >
            提醒
          </List.Item>
        </List>
      </div>
      <div className="records">
      <TextArea
          placeholder="字数限制20"
          showCount
          maxLength={20}
        />
      </div>
      <div style={{width:'40rem',margin:'0 auto',padding:'0 1rem',
        paddingTop:'17rem'
      }}>
        <Button block color='primary' size='large'>
           保存
          </Button>
      </div>
      <Picker
        style={{
          "--title-font-size": "13px",
          "--header-button-font-size": "13px",
          "--item-font-size": "13px",
          "--item-height": "30px",
        }}
        defaultValue={["Wed", "pm"]}
        key={basicColumns.title}
        columns={basicColumns}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        value={value}
        onConfirm={(v) => {
          setValue(v);
        }}
      />
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
        bodyStyle={{ height: "40vh" }}
      >

        <List>
          {
            list.map((item,index)=>{
              return(
                <List.Item style={{textAlign:'center'}} onClick={() => {
                  handleTxs(item);
                }
                } key={index}>{item.title}</List.Item>
              )
            })
          }
        </List>
      </Popup>
    </div>
  );
}

export default Record;
